import React, {useContext,useState} from 'react'
import "./index.css"
import {App1Context} from "../../../App"
export default function Item({ todo, done ,id}) {
  const {todoList,setTodoList} = useContext(App1Context)
  //来保存状态
  const [isActive, setIsActive] = useState(false);


  //点击选择多选框
  const checkedFrame = (e) => {
    const newTodo = todoList.map(item => {
      if(item.id === id){
        item.done = e.target.checked;
      }
      return item
    })
    setTodoList(newTodo)
  }
  // 添加删除逻辑 
   const deleteTodo = () => {
    setTodoList(todoList.filter(item => {
      return item.id !== id
    }))
   }
  return (
    <li onMouseEnter={() => {setIsActive(true)} } onMouseLeave ={() => {setIsActive(false)}} className = {isActive?'active':''} >
      <label>
        <input type="checkbox" checked={done} onChange = {checkedFrame} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" onClick={deleteTodo} style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
